<template>
	<view class="detail">
		<view class="fixbg" :style="{'background-image':'url(../../static/logo.png)'}"></view>
		<musicHead :icon='true' title='歌单' color='#fff'/>
		<view class="container" v-show="!isLoading">
			<scroll-view class="scroll" scroll-y="true" >
				<view class="detail-play" @tap="handleYype">
					<image src="../../static/logo.png" mode="" :class="{'detail-play-run':isPlayRoute}"></image>
					<text class="iconfont" :class="iconPlay"></text>
					<view></view>
				</view>
				<view class="detail-lyric">
					<view class="detail-lyric-wrap" :style="{transform:'translateY('+ -(lyricIndex - 1)*82 +'rpx)'}">
						<view 
							class="detail-lyric-item"
							:class="{'active':index===lyricIndex}"
							v-for="(item,index) in songLyric"
							:key='index'
						>{{item.lyric}}</view>
					</view>
				</view>
				<view class="detail-like">
					<view class="detail-like-head">喜欢这首歌的人也听</view>
					<view class="detail-like-item" v-for='(item,index) in songSimi' :key='index' @tap="handleToSimi(item.id)">
						<view class="detail-like-img">
							<image :src='item.album.picUrl'></image>
						</view>
						<view class="detail-like-song">
							<view>{{item.name}}</view>
							<view>
								<image v-if='item.privilege.flag > 60 && item.privilege.flag < 70' src="../../static/logo.png"></image>
								<image v-if='item.privilege.maxbr === 999000' src="../../static/logo.png"></image>
								{{item.album.artists[0].name}} - {{item.name}}
							</view>
						</view>
						<text class="iconfont icon-bofang"></text>
					</view>
				</view>
				<view class="detail-comment">
					<view class="detail-comment-head">精彩评论</view>
					<view class="detail-comment-item" v-for='(item,index) in songComment' :key='index'>
						<view class="detail-comment-img">
							<image :src="item.user.avatarUrl"></image>
						</view>
						<view class="detail-comment-content">
							<view class="detail-comment-title">
								<view class="detail-comment-name">
									<view>{{item.user.nickname}}</view>
									<view>{{item.time | formatTime}}</view>
								</view>
								<view class="detail-comment-like">
									<text>{{item.likedCount | formatCount}}</text>
									<text class="iconfont icon-dianzan"></text>
								</view>
							</view>
							<view class="detail-comment-text">{{item.content}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>	
	</view>
</template>

<script>
	import '@/common/iconfont.css';
	import {_songDetail,_songSimi,_songComment,_songLyric,_songUrl} from '../../common/api.js';
	import musicHead from '../../components/musicHead/index.vue';
	export default {
		data() {
			return{
				songId: '',
				songDetail: {},
				songSimi:[],
				songComment: [],
				songLyric: [],
				lyricIndex:0,
				// bgAudioMannager:{},
				iconPlay:'icon-zanting',
				isPlayRoute: true,
				isLoading:false
			}
		},
		components:{
			musicHead
		},
		onLoad(options){
			// console.log(options);
			this.songId = options.id;
			// this.getMusic(options.id)
		},
		onShow() {
			if(this.songId) {
				this.getMusic(this.songId)
			}
		},
		onUnload() {
			this.cancelLyricIndex();
			// #ifdef H5
			this.bgAudioMannager.destroy();
			// #endif
		},
		onHide(){
			this.cancelLyricIndex()
			// #ifdef H5
			this.bgAudioMannager.destroy();
			// #endif
		},
		methods:{
			async getMusic(songId) {
				this.$store.commit('NEXT_ID',songId)
				uni.showLoading({
					title:'加载中...'
				})
				this.isLoading = true;
				// let res1 = await _songDetail(songId);
				// this.songDetail = res1.data.songs[0];
				// #ifdef MP-WEIXIN
				this.bgAudioMannager = uni.getBackgroundAudioManager();
				this.bgAudioMannager.title = '测试';
				// #endif
				// #ifdef H5
				if(!this.bgAudioMannager){
					this.bgAudioMannager = uni.createInnerAudioContext();
				}
				this.iconPlay = 'icon-bofang';
				this.isPlayRoute = false;
				// #endif
				let res2 = await _songSimi(songId);
				this.songSimi = res2.data.songs;
				let res3 = await _songComment(songId);
				this.songComment = res3.data.hotComments;
				let res4 = await _songLyric(songId);
				let songLyric = res4.data.lrc.lyric;
				let re = /\[([^\]]+)\]([^\[]+)/g;
				let result = [];
				let that = this;
				songLyric.replace(re,function($0,$1,$2){
					result.push({"time":that.formatTimeToSec($1),"lyric":$2})
				})
				this.songLyric = result;
				let res5 = await _songUrl(songId);
				that.bgAudioMannager.src = res5.data.data[0].url || '';
				that.listenLyricIndex();
				that.bgAudioMannager.onPlay(function(){
					that.iconPlay = 'icon-zanting';
					that.isPlayRoute = true;
					that.listenLyricIndex();
				})
				that.bgAudioMannager.onPause(function(){
					that.iconPlay = 'icon-bofang';
					that.isPlayRoute = false;
					that.cancelLyricIndex()
				})
				that.bgAudioMannager.onEnded(function(){
					that.getMusic(that.$store.state.nextId)
				})
				this.isLoading = false;
				uni.hideLoading();
			},
			formatTimeToSec(val) {
				let arr = val.split(':');
				return parseFloat(Number(arr[0]*60) + Number(arr[1])).toFixed(1)
			},
			handleYype() {
				if(this.bgAudioMannager.paused){
					this.bgAudioMannager.play()
					this.iconPlay = 'icon-zanting';
				} else {
					this.bgAudioMannager.pause()
					this.iconPlay = 'icon-bofang';
				}
			},
			listenLyricIndex() {
				clearInterval(this.timer);
				this.timer = setInterval(() => {
					for(let i=0;i<this.songLyric.length;i++) {
						if(this.bgAudioMannager.currentTime > this.songLyric[this.songLyric.length - 1].time){
							this.lyricIndex = this.songLyric.length - 1;
							break;
						}
						if(this.bgAudioMannager.currentTime > this.songLyric[i].time && this.bgAudioMannager.currentTime < this.songLyric[i+1].time){
							this.lyricIndex = i;
						}
					}
				},500)
			},
			cancelLyricIndex() {
				clearInterval(this.timer)
			},
			handleToSimi(songId){
				this.getMusic(songId)
			}
		}
	}
</script>

<style scoped>
	.detail-play{width: 580upx;height: 580upx;background: url(../../static/logo.png) no-repeat; background-size: cover;margin:214upx auto 0 auto;position: relative;}
	.detail-play image{width: 370upx;height: 370upx;border-radius: 50%;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;animation: 10s linear move infinite;animation-play-state: paused;}
	.detail-play .detail-play-run{animation-play-state: running;}
	@keyframes move{
		from{transform: rotate(0deg);}
		to{transform: rotate(360deg);}
	}
	.detail-play text{width: 100upx;height: 100upx; font-size: 100upx;color: #fff;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;z-index: 10;}
	.detail-play view{width: 230upx;height: 360upx;background: url(../../static/logo.png);position: absolute;left: 100upx;top: -200upx;right: 0;bottom: 0;margin: auto;background-size: cover;}
	
	.detail-lyric{font-size: 32upx;line-height: 32upx;height: 246upx;text-align: center;overflow: hidden;}
	.detail-lyric-wrap{transition: .5s;}
	.detail-lyric-item{height: 82upx;color:#ccc;line-height: 82upx;}
	.detail-lyric-item.active{color:#fff;}
	
	.detail-like{margin:0 30upx;}
	.detail-like-head{font-size: 36upx;color:#fff;margin:50upx 0;}
	.detail-like-item {display: flex;align-items: center;margin-bottom: 28upx;}
	.detail-like-img{width: 82upx;height: 82upx;border-radius: 20upx;overflow: hidden;margin-right: 20upx;}
	.detail-like-img image{width: 100%;height: 100%;}
	.detail-like-song{flex: 1;color: #c6c2bf;}
	.detail-like-song:nth-child(1){font-size: 28upx;color:#fff;margin-bottom: 12upx;}
	.detail-like-song image{width: 26upx;height: 20upx;margin-right: 10upx;}
	.detail-like-item text{font-size: 50upx;}
	
	.detail-comment{margin:0 30upx;}
	.detail-comment-head{font-size: 36upx;color:#fff;margin:50upx 0;}
	.detail-comment-item{display: flex; margin-bottom:28upx;}
	.detail-comment-img{width: 64upx;height: 64upx;border-radius: 50%;overflow: hidden;margin-right: 18upx;}
	.detail-comment-img image{width: 100%;height: 100%;}
	.detail-comment-content{flex: 1;}
	.detail-comment-title{display: flex;justify-content: space-between;}
	.detail-comment-name{}
	.detail-comment-name:nth-child(1){font-size: 26upx;}
	.detail-comment-name:nth-child(2){font-size: 20upx;}
	.detail-comment-like{font-size: 28upx;}
	.detail-comment-text{font-size: 28upx;line-height: 40upx;color:#fff;margin-top:20upx;border-bottom: 1px solid #59595b;padding-bottom:40upx;}
</style>
